import { CSSProperties } from 'react'
import { useRequest, useUpdateEffect } from 'ahooks'
import dayjs from 'dayjs'
import { Card } from 'antd'

import { useControllerRef } from '@/hooks/useAbortController'
import { getShipFromName } from '@oBiz/TrackOrder/utils'
import { withDelayRequest } from '../utils'
import { apiGetAmazonInfo } from './apis'
import styles from './styles.module.less'

const getAmazonInfo = withDelayRequest(apiGetAmazonInfo)
const ymdFormat = (v: string | null | undefined) => (v ? dayjs(v).$formatSmart($F_YMD) : '--')

export const Amazon = ({ waybillNo, style }: { waybillNo: string; style?: CSSProperties }) => {
  const controllerRef = useControllerRef()
  const { loading, data, mutate, run } = useRequest(() => {
    mutate(undefined)
    controllerRef.current.abort()
    controllerRef.current = new AbortController()
    return getAmazonInfo(waybillNo, controllerRef.current.signal)
  })

  useUpdateEffect(() => run(), [waybillNo])

  if (!data?.fbaId) return null
  return (
    <div style={style}>
      <Card style={{ minHeight: 410 }} className={styles.card} title="Amazon" loading={loading}>
        <div className={styles.contain}>
          <div className={styles.item}>
            <span className={styles.label}>FBA ID</span>
            <span>{data.fbaId || '--'}</span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>RE ID</span>
            <span>{data.reId || '--'}</span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>Delivery window (Estimated)</span>
            <span>
              {data.predictTimeStart && data.predictTimeEnd
                ? `${ymdFormat(data.predictTimeStart)} ~ ${ymdFormat(data.predictTimeEnd)}`
                : '--'}
            </span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>Delivery window (Actual)</span>
            <span>
              {data.practicalDeliveryTimeStart && data.practicalDeliveryTimeEnd
                ? `${ymdFormat(data.practicalDeliveryTimeStart)} ~ ${ymdFormat(data.practicalDeliveryTimeEnd)}`
                : '--'}
            </span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>DW Days</span>
            <span>{data.dayNum || '--'}</span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>Ship From</span>
            <span>{getShipFromName(data.shipFrom, true) || '--'}</span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>Estimated Delivery Date (Initial)</span>
            <span>{ymdFormat(data.predictSignTime)}</span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>Estimated Delivery Date (Dynamic)</span>
            <span>
              {ymdFormat(data.dynamicSignTime)}
              {data.predictSignTime && data.dynamicSignTime
                ? ` (${dayjs(data.dynamicSignTime).diff(dayjs(data.predictSignTime), 'day')})`
                : ''}
            </span>
          </div>
          <div className={styles.item}>
            <span className={styles.label}>Actual Delivery Date</span>
            <span>{ymdFormat(data.practicalSignTime)}</span>
          </div>
        </div>
      </Card>
    </div>
  )
}
